<template>
    <control title="富文本" :is_tab="false">
        <el-form ref="form" :model="content"  label-width="90px" size="mini" label-position="left">
            <div class="control-item-title">颜色设置</div>
            <el-form-item label="背景颜色">
                <colour v-model="facade.background_color" colour="#fff"></colour>
            </el-form-item>

            <cl-editor-quill v-model="content.quillText" :height="400" />
        </el-form>
    </control>
</template>
<script type="text/javascript">
import control from '/$/magic/components/control.vue';
import colour from '/$/magic/components/colour.vue';
export default {
    components: {
        control,
        colour,
    },
    data() {
        return {

        };
    },
    /**
     * 计算属性
     * @type {Object}
     */
  computed: {
    content: {
      get() {
        return this.$store.getters.content;
      },
      set(value) {
        let data = {
          key: 'content',
          value: value
        };
        this.$store.commit('finish/setAttribute', data);
      }
    },
    facade: {
      get() {
        return this.$store.getters.facade;
      },
      set(value) {
        let data = {
          key: 'facade',
          value: value
        };
        this.$store.commit('finish/setAttribute', data);
      }
    }
  },
    /**
     * 页面渲染前
     * @return {[type]} [description]
     */
    created() {
      console.log(this.content,222);

    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

    },
    methods: {
    
    }
};
</script>
<style lang="less" scoped>
@import '../attribute.less';

.resetBtn {
    padding-left: 7px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-primary);
    cursor: pointer; 
}
</style>